<script src="<?php echo $baseurl?>public/theme/analytics/js/chart/highcharts.js"></script>
<script src="<?php echo $baseurl?>public/theme/analytics/js/chart/modules/highcharts-3d.js"></script>
<script src="<?php echo $baseurl?>public/theme/analytics/js/chart/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
    

    
    Highcharts.setOptions(Highcharts.theme);

    /**
    *
    *
    * Tỷ lệ lượt hiển thị trên thiết bị
    *
    */
    $('#container_device').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Tỷ lệ hiển thị trên thiết bị'
            },
            tooltip: {
        	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        connectorColor: 'silver'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Tổng số',
                data: [
                    <?php $count_device = 0; foreach($device AS $le=>$el):?>
                    <?php if($le != 'tong_device'):?>
                        ['<?php $count_device++; echo $le?>', <?php echo $el?>],
                    <?php endif;?>
                    <?php endforeach;?>
                ]
            }]
        });
    });
    
    
   
</script>

<script type="text/javascript">
$(function () {

    $('#container_os').highcharts({
       chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                                style: {
                    fontFamily: 'Tahoma,Arial,sans-serif'
                }
            },
            title: {
                text: 'Tỷ lệ lượt hiển thị trên các hệ điều hành'
            },
            tooltip: {
        	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        connectorColor: 'silver'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Tổng số',
                data: [
                    <?php $count_os = 0; foreach($os_group AS $le=>$el):?>
                    <?php if($le != 'tong_os'):?>
                        ['<?php $count_os++; echo $le?>', <?php echo $el?>],
                    <?php endif;?>
                    <?php endforeach;?>
                ]
            }]
        });
    });
</script>

<script type="text/javascript">
$(function () {

    $('#container_broswer').highcharts({
       chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                                style: {
                    fontFamily: 'Tahoma,Arial,sans-serif'
                }
            },
            title: {
                text: 'Tỷ lệ lượt hiển thị trên các trình duyệt'
            },
            tooltip: {
        	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        connectorColor: 'silver'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Tổng số',
                data: [
                    <?php $count_br = 0; foreach($browser AS $le=>$el):?>
                    <?php if($le != 'tong_browser'):?>
                        ['<?php $count_br++; echo $le?>', <?php echo $el?>],
                    <?php endif;?>
                    <?php endforeach;?>
                ]
            }]
        });
    });
</script>

<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                style: {
                    fontFamily: 'Tahoma,Arial,sans-serif'
                }
            },
            title: {
                text: 'Lượt truy cập theo thời gian'
            },
            xAxis: {
                type: 'category',
                categories: [<?php $cfd = 0; $ft = ''; foreach($chart_ab AS $le=>$el):?><?if($le != 'tong'):?><?php $cfd += $el; $ft .= ",'".$le."'";?><?php endif;?><?php endforeach;?> <?php echo substr($ft, 1);?>],
                labels: {
                    rotation: -65,
                    
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Số lượt'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: 'Tổng số: <b>{point.y:f}</b>',
            },
            series: [{
                name: 'Population',
                data: [
                    <?php foreach($chart_ab AS $el=>$le):?>
                    <?php if($el != 'tong'):?>
                    ['<?php echo $el?>', <?php echo $le?>],
                    <?php endif;?>
                    <?php endforeach;?>
                ],
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
            }, {
                type: 'spline',
                name: 'Tổng số',
                data: [<?php foreach($chart_ab AS $eld=>$led):?>
                    <?php if($eld != 'tong'):?>
                    <?php echo $led?>,
                    <?php endif;?>
                    <?php endforeach;?>],
                    marker: {
            	lineWidth: 2,
            	lineColor: Highcharts.getOptions().colors[3],
            	fillColor: 'white'                
            }                    
            }]
        });
    });
    


</script>



<link href="<?php echo $baseurl?>public/theme/analytics/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="<?php echo $baseurl?>public/theme/analytics/picker/moment.js"></script>
<script type="text/javascript" src="<?php echo $baseurl?>public/theme/analytics/picker/daterangepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {

  var cb = function(start, end, label) {
    //console.log(start.toISOString(), end.toISOString(), label);
    $('#reportrange span').html(start.format('DD/MM/YYYY HH:mm') + ' - ' + end.format('DD/MM/YYYY HH:mm'));
    $("#times").val(start.format('YYYYMMDDHHmm00') + '|' + end.format('YYYYMMDDHHmm00'));
    getChart();
  }

  var optionSet1 = {
    startDate: moment().subtract('days', 0),
    endDate: moment(),
    minDate: '01/01/2014',
    maxDate: '12/31/2030',
    dateLimit: { days: 365 },
    showDropdowns: true,
    showWeekNumbers: true,
    timePicker: true,
    timePickerIncrement: 1,
    timePicker12Hour: true,
    ranges: {
       'Hôm nay': [moment().startOf('day'), moment()],
       'Hôm qua': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
       '7 ngày trước': [moment().subtract('days', 6).startOf('day'), moment().endOf('day')],
       '30 ngày trước': [moment().subtract('days', 29).startOf('day'), moment().endOf('day')],
       'Tháng này': [moment().startOf('month').startOf('day'), moment().endOf('month')],
       'Tháng trước': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
    },
    opens: 'left',
    buttonClasses: ['btn btn-default'],
    applyClass: 'btn-small btn-primary',
    cancelClass: 'btn-small',
    format: 'DD/MM/YYYY HH:mm',
	timePicker: true,
    separator: ' to ',
    locale: {
        applyLabel: 'Đồng ý',
        cancelLabel: 'Hủy bỏ',
        fromLabel: 'Từ',
        toLabel: 'đến',
        customRangeLabel: 'Chọn thời gian',
        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
        monthNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        firstDay: 1
    }
  };

  var optionSet2 = {
    startDate: moment().subtract('days', 7),
    endDate: moment(),
    opens: 'left',
    ranges: {
       'Hôm nay': [moment(), moment()],
       'Hôm qua': [moment().subtract('days', 1), moment().subtract('days', 1)],
       '7 ngày trước': [moment().subtract('days', 6), moment()],
       '30 ngày trước': [moment().subtract('days', 29), moment()],
       'Tháng này': [moment().startOf('month'), moment().endOf('month')],
       'Tháng trước': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
    }
  };
  $('#reportrange span').html('<?php echo $time_select?>');//alert('sdf');
  $('#times').val('<?php echo $time?>');
  $('#reportrange').daterangepicker(optionSet1, cb);

  $('#reportrange').on('show.daterangepicker', function() { console.log("show event fired"); });
  $('#reportrange').on('hide.daterangepicker', function() { console.log("hide event fired"); });
  $('#reportrange').on('apply.daterangepicker', function(ev, picker) { 
    console.log("apply event fired, start/end dates are " 
      + picker.startDate.format('DD/MM/YYYY HH:mm') 
      + " to " 
      + picker.endDate.format('DD/MM/YYYY HH:mm')
    ); 
  });
  $('#reportrange').on('cancel.daterangepicker', function(ev, picker) { console.log("cancel event fired"); });

  $('#options1').click(function() {
    $('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
  });

  $('#options2').click(function() {
    $('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
  });

  $('#destroy').click(function() {
    $('#reportrange').data('daterangepicker').remove();
  });

});

function getChart()
{
    $(".orverlay").css('display', 'block');
    var time = $('#times').val();
    $(".preload").css('display','block');
    var link = 'report-place';
    window.location = '<?php echo $baseurl;?>'+link+'?id=<?php echo $id?>&type=1&time='+time+'&time_select='+$('#reportrange span').html();
}
dem = 0;
$(function(){
  $('a[href="#loadmore"]').click(function()
  {
        var cdf = "<?=$this->security->get_csrf_hash();?>"; 
        dem = parseInt(dem) + 20;
        $('a[href="#loadmore"]').css('display', 'none');
        $('#loadding_m').css('display', 'block');
        $.ajax({
            type: 'POST',
            url: '<?php echo $baseurl;?>gettimeaccess',
            data: ({dem: dem, id: <?php echo $id;?>, csrf_pj : cdf}),
            success: function(data)
            {         
                setTimeout(function()
                {
                    if(data == '201')
                    {
                        $('a[href="#loadmore"]').css('display', 'block');
                        $('.notifi_').html('<p style="text-align: center">Không tìm thấy bản ghi nào</p>');
                        $('#loadding_m').css('display', 'none');
                    }else{
                        
                        $('#time_access tr:last').after(data);
                        $('a[href="#loadmore"]').css('display', 'block');
                        $('#loadding_m').css('display', 'none');
                    }
                },1000);
            }
        })
  });
});
</script>
<style>
.highcharts-title tspan {
font-family: Arial !important;
}
.page-header{
    margin: 20px 0 15px;
    border-bottom: none 0;
}
</style>
<div class="inside">
   <div class="contentPanel full dashboard" style="padding-top: 35px !important;">
      <div class='pages' id='design'>

            
            <div class="workplace">  
                <div style="position: absolute;right: 441px;top: 60px;font-size: 17px;">
                    <button onclick="report()" style="background: #0C88D6;border: 1px solid #2A85C2;padding: 5px;margin-top: -5px;color: #FFF;">Xuất báo cáo</button>
                </div>
                <div style="position: absolute;right: 317px;top: 63px;font-size: 17px;">Chọn thời gian</div>
                <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;position: absolute;right: 20px;top: 58px;">
                      <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                      <span></span> <b class="caret"></b>
                      <input type="hidden" id="times" value="" />
                </div> 
                <div class="page-header" style="margin-top: 0px;">
                    <h1 style="width: 55%;border-bottom: none 0;color: #777"><small>Thống kê</small> <?php echo $nameShop?></h1>
                    
                </div> 
                <div class="row-fluid">
                    <div class="span12" style="margin-top: -30px;">
                        <div class="block" style="height: 50px;border-top: 1px solid #ccc;padding: 10px;">                        
                            <!-- <a href="#dModal" role="button" class="btn" data-toggle="modal">Xuất file</a> -->
                            <a></a>
                            <div id="dModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" style="width: 200px;left: 65%">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h3 id="myModalLabel">Default</h3>
                                </div>
                                <div class="modal-body">
                                    <ul>
                                        <li>Xuất file doc</li>
                                        <li>Xuất file excel</li>
                                        <li>Xuất file pdf</li>
                                    </ul>
                                </div>
                            </div> 
                            <!--
                            <div style="float: right;">
                                <span>Thống kê theo</span>
                                <select id="type" onchange="getChart();">
                                    <?php echo $selectType?>
                                </select>
                            </div>
                                --> 
                        </div>
                    </div>
                  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;padding-bottom: 40px"></div>
                  <div class="dashboardLine" style="margin-top: 20px;"> 
                        <div class="row-fluid"> 
                            <div class="span3">
                             <div class="iconColor darkgreen"></div>
                              <div class="nums">
                                <div class="cell" style="background: #ececec;"><span><?php echo number_format($cfd, '0', '', '.') ?></span><small>Lượt truy cập</small></div>
                              </div>
                            </div>
                            <div class="span3">
                             <div class="iconColor_browser"></div>
                              <div class="nums">
                                <div class="cell" style="background: #ececec;"><span><?php echo number_format($count_br, '0', '', '.') ?></span><small>Loại trình duyệt</small></div>
                              </div>
                            </div>
                            <div class="span3">
                             <div class="iconColor_device"></div>
                              <div class="nums">
                                <div class="cell" style="background: #ececec;"><span><?php echo number_format(sizeof($device_name), '0', '', '.') ?></span><small>Loại máy</small></div>
                              </div>
                            </div>
                            <div class="span3">
                             <div class="iconColor_os"></div>
                              <div class="nums">
                                <div class="cell" style="background: #ececec;"><span><?php echo number_format($count_os, '0', '', '.') ?></span><small>Loại hệ điều hành</small></div>
                              </div>
                            </div>
                            
                            
                        </div>

                    </div>
                     <div class="dashboardLine" style="float: left;width: 32%"> 
                        <div class="row-fluid"> 
                            <div class="span12">
                             <div class="iconColor_email"></div>
                              <div class="nums">
                                <div class="cell" style="background: #ececec;"><span><?php echo number_format($getmail, '0', '', '.') ?></span><small>Email đăng ký</small></div>
                                <div class="cell" style="background: #ececec;"><span><img style="cursor: pointer;" title="Xuất báo cáo" onclick="report_email()" src="<?php echo $baseurl.'public/theme/analytics/export-icon.png'; ?>"/></span><small>Xuất báo cáo</small></div>
                              </div>
                              
                            </div>
                            
                            
                        </div>
                    </div>  
                         
                    <div class="dashboardLine" style="float: left;width: 32%;margin-left:23px"> 
                        <div class="row-fluid"> 
                            <div class="span12">
                             <div class="iconColor_mobile"></div>
                              <div class="nums">
                                <div class="cell" style="background: #ececec;"><span><?php echo number_format($getmobile, '0', '', '.') ?></span><small>Số điện thoại</small></div>
                                <div class="cell" style="background: #ececec;"><span><img style="cursor: pointer;" title="Xuất báo cáo" onclick="report_mobile()" src="<?php echo $baseurl.'public/theme/analytics/export-icon.png'; ?>"/> </span><small>Xuất báo cáo</small></div>
                              </div>
                              
                            </div>
                            
                            
                        </div>
                    </div>    
                    <div class="dashboardLine" style="float: left;width: 32%;margin-left:23px"> 
                        <div class="row-fluid"> 
                            <div class="span12">
                             <div class="iconColor_facebook"></div>
                              <div class="nums">
                                <div class="cell" style="background: #ececec;"><span><?php echo number_format($getfacebook, '0', '', '.') ?></span><small>Facebook</small></div>
                                <div class="cell" style="background: #ececec;"><span><img style="cursor: pointer;" title="Xuất báo cáo" onclick="report_facebook()" src="<?php echo $baseurl.'public/theme/analytics/export-icon.png'; ?>"/> </span><small>Xuất báo cáo</small></div>
                              </div>
                              
                            </div>
                            
                            
                        </div>
                    </div>     
                  <div class="row-fluid">
                    <div class="span6" style="margin-top: 65px;" id="page">
                        
                        
                        
                        
                        <div class="block" style="border: 1px solid #CCC;border-radius: 5px;margin-bottom: 20px">                        
                           <div class="block-fluid" id="page_show">
                                <table cellpadding="0" cellspacing="0" width="100%" class="table">
                                    <thead>
                                        <tr>                                    
                                            <th colspan="5" style="background: #f2f2f2;padding: 10px;border-bottom: none;font-size: 20px;font-weight: normal;"><center>Trình duyệt khách truy cập</center></th>                                    
                                        </tr>
                                        <tr>                          
                                            <th width="75%">Trình duyệt</th>
                                            <th width="25%">Khách truy cập</th>                                     
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php if(!in_array($browser, array(null, '', '0'))):?>
                                        <?php arsort($browser); foreach($browser AS $el=>$le):?>
                                        <?php if($el != 'tong_browser'):?>
                                        <tr>                          
                                            <td width="75%"><?php echo $el?></td>
                                            <td width="25%" style="text-align: center;"><?php echo number_format($le, '0', '', '.')?></td>                                     
                                        </tr>
                                        <?php endif; endforeach;endif;?>         
                                    </tbody>
                                </table>
                            </div> 
                        </div>
                        
                         <div class="block" style="border: 1px solid #CCC;border-radius: 5px;margin-bottom: 20px">                        
                           <div class="block-fluid" id="page_show">
                                <table cellpadding="0" cellspacing="0" width="100%" class="table fix-table-hidden-over table-br">
                                    <thead class="fix-thead-hidden-over">
                                        <tr>                                    
                                            <th colspan="5" style="background: #f2f2f2;padding: 10px;border-bottom: none;font-size: 20px;font-weight: normal;"><center>Phiên bản trình duyệt</center></th>                                    
                                        </tr>
                                        <tr>                          
                                            <th width="75%">Phiên bản</th>
                                            <th width="25%">Khách truy cập</th>                                     
                                        </tr>
                                    </thead>
                                    <tbody class="fix-tbody-hidden-over">
                                        <?php if(!in_array($browser_ver, array(null, '', '0'))):?>
                                        <?php arsort($browser_ver); foreach($browser_ver AS $el=>$le):?>
                                        
                                        <tr>                          
                                            <td width="75%"><?php echo $el?></td>
                                            <td width="25%" style="text-align: center;"><?php echo number_format($le, '0', '', '.')?></td>                                     
                                        </tr>
                                        <?php endforeach; endif;?>             
                                    </tbody>
                                </table>
                                <div class="toolbar bottom-toolbar clearfix notifi_">
                                    <div style="padding: 5px 15px 5px 5px;" class="show_more_analytics">
                                       <a href="#loadmore-br" style="text-decoration: underline;float: left;text-align: center;width: 100%;padding: 5px 0px 5px 5px;">
                                            Xem thêm
                                       </a>                              
                                    </div>
                                </div> 
                            </div> 
                        </div>
                        <div class="block" style="border: 1px solid #CCC;border-radius: 5px;margin-bottom: 20px">                        
                           <div class="block-fluid" id="page_show">
                                <table cellpadding="0" cellspacing="0" width="100%" class="table">
                                    <thead>
                                        <tr>                                    
                                            <th colspan="5" style="background: #f2f2f2;padding: 10px;border-bottom: none;font-size: 20px;font-weight: normal;"><center>Hệ điều hành khách sử dụng</center></th>                                    
                                        </tr>
                                        <tr>                          
                                            <th width="75%">Hệ điều hành</th>
                                            <th width="25%">Khách sử dụng</th>                                     
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php if(!in_array($os_group, array(null, '', '0'))):?>
                                        <?php arsort($os_group); foreach($os_group AS $el=>$le):?>
                                        <?php if($el != 'tong_os'):?>
                                        <tr>                          
                                            <td width="75%"><?php echo $el?></td>
                                            <td width="25%" style="text-align: center;"><?php echo number_format($le, '0', '', '.')?></td>                                     
                                        </tr>
                                        <?php endif; endforeach; endif;?>          
                                    </tbody>
                                </table>
                            </div> 
                        </div>
                        <div class="block" style="border: 1px solid #CCC;border-radius: 5px;margin-bottom: 20px">                        
                           <div class="block-fluid" id="page_show">
                                <table cellpadding="0" cellspacing="0" width="100%" class="table fix-table-hidden-over table-os">
                                    <thead class="fix-thead-hidden-over">
                                        <tr>                                    
                                            <th colspan="5" style="background: #f2f2f2;padding: 10px;border-bottom: none;font-size: 20px;font-weight: normal;"><center>Phiên bản hệ điều hành khách sử dụng</center></th>                                    
                                        </tr>
                                        <tr>                          
                                            <th width="75%">Hệ điều hành</th>
                                            <th width="25%">Khách sử dụng</th>                                     
                                        </tr>
                                    </thead>
                                    <tbody class="fix-tbody-hidden-over">
                                        <?php if(!in_array($os, array(null, '', '0'))):?>
                                        <?php arsort($os); foreach($os AS $el=>$le):?>
                                        <?php if($el != 'tong_os'):?>
                                        <tr>                          
                                            <td width="75%"><?php echo $el?></td>
                                            <td width="25%" style="text-align: center;"><?php echo number_format($le, '0', '', '.')?></td>                                     
                                        </tr>
                                        <?php endif; endforeach; endif;?>          
                                    </tbody>
                                </table>
                                
                                <div class="toolbar bottom-toolbar clearfix notifi_">
                                    <div style="padding: 5px 15px 5px 5px;" class="show_more_analytics">
                                       <a href="#loadmore-os" style="text-decoration: underline;float: left;text-align: center;width: 100%;padding: 5px 0px 5px 5px;">
                                            Xem thêm
                                       </a>                              
                                    </div>
                                </div> 
                            </div> 
                        </div>
                        
                        <div class="block" style="border: 1px solid #CCC;border-radius: 5px;margin-bottom: 20px">                        
                           <div class="block-fluid" id="page_show">
                                <table cellpadding="0" cellspacing="0" width="100%" class="table">
                                    <thead>
                                        <tr>                                    
                                            <th colspan="5" style="background: #f2f2f2;padding: 10px;border-bottom: none;font-size: 20px;font-weight: normal;"><center>Loại thiết bị</center></th>                                    
                                        </tr>
                                        <tr>                          
                                            <th width="75%">Thiết bị</th>
                                            <th width="25%">Khách truy cập</th>                                     
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php if(!in_array($device, array(null, '', '0'))):?>
                                       <?php arsort($device); foreach($device AS $el=>$le):?>
                                        <?php if($el != 'tong_device'):?>
                                        <tr>                          
                                            <td width="75%"><?php echo $el?></td>
                                            <td width="25%" style="text-align: center;"><?php echo number_format($le, '0', '', '.')?></td>                                     
                                        </tr>
                                        <?php endif; endforeach; endif;?>           
                                    </tbody>
                                </table>
                            </div> 
                        </div>
                        
                        <div class="block" style="border: 1px solid #CCC;border-radius: 5px;margin-bottom: 20px">                        
                           <div class="block-fluid" id="page_show">
                                <table cellpadding="0" cellspacing="0" width="100%" class="table fix-table-hidden-over table-device">
                                    <thead class="fix-thead-hidden-over">
                                        <tr>                                    
                                            <th colspan="5" style="background: #f2f2f2;padding: 10px;border-bottom: none;font-size: 20px;font-weight: normal;"><center>Tên thiết bị</center></th>                                    
                                        </tr>
                                        <tr>                          
                                            <th width="75%">Tên thiết bị</th>
                                            <th width="25%">Khách truy cập</th>                                     
                                        </tr>
                                    </thead>
                                    <tbody class="fix-tbody-hidden-over">
                                        <?php if(!in_array($device_name, array(null, '', '0'))):?>
                                        <?php arsort($device_name); foreach($device_name AS $el=>$le):?>
                                        
                                        <tr>                          
                                            <td width="75%"><?php echo $el?></td>
                                            <td width="25%" style="text-align: center;"><?php echo number_format($le, '0', '', '.')?></td>                                     
                                        </tr>
                                        <?php endforeach;?>    
                                        <?php endif;?>           
                                    </tbody>
                                </table>
                                <div class="toolbar bottom-toolbar clearfix notifi_">
                                    <div style="padding: 5px 15px 5px 5px;" class="show_more_analytics">
                                       <a href="#loadmore-device" style="text-decoration: underline;float: left;text-align: center;width: 100%;padding: 5px 0px 5px 5px;">
                                            Xem thêm
                                       </a>                              
                                    </div>
                                </div> 
                            </div> 
                        </div>
                       
                        
                    </div>
                    
                    
                    <div class="span6" style="margin-top: 65px;">
                        <div class="block" style="border-radius: 5px">        
                            
                            
                            
                                          
                           <div id="container_broswer" style="min-width: 310px; height: 400px; margin: 0 auto;border: 1px solid #CCC;margin-bottom: 10px"></div>
                           <div id="container_os" style="min-width: 310px; height: 400px; margin: 0 auto;border: 1px solid #CCC;margin-bottom: 10px"></div>
                           <div id="container_device" style="min-width: 310px; height: 400px; margin: 0 auto;border: 1px solid #CCC;margin-bottom: 10px"></div>
                           
                           
                            
                       <div class="block" style="border: 1px solid #CCC;border-radius: 5px;margin-bottom: 20px">                        
                           <div class="block-fluid" id="page_show">
                                <table cellpadding="0" cellspacing="0" width="100%" class="table" id="time_access">
                                    <thead>
                                        <tr>                                    
                                            <th colspan="5" style="background: #f2f2f2;padding: 10px;border-bottom: none;font-size: 20px;font-weight: normal;"><center>Thời gian khách truy cập</center></th>                                    
                                        </tr>
                                        <tr>                          
                                            <th width="75%">Thời gian</th>
                                            <th width="25%">Khách truy cập</th>                                     
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php if(!in_array($show_time, array(null, '', '0'))):?>
                                        <?php /*arsort($show_time);*/ foreach($show_time AS $el=>$le):?>
                                        
                                        <tr>                          
                                            <td width="75%"><?php echo str_replace('-', '/', $el)?></td>
                                            <td width="25%" style="text-align: center;"><?php echo number_format($le, '0', '', '.')?></td>                                     
                                        </tr>
                                        <?php endforeach;?>   
                                        <?php endif;?>          
                                    </tbody>
                                </table>
                                <div class="toolbar bottom-toolbar clearfix notifi_">
                                    <div style="padding: 5px 15px 5px 5px;" class="show_more_analytics">
                                       <a href="#loadmore" style="text-decoration: underline;float: left;text-align: center;width: 100%;padding: 20px 0px;">
                                            Xem thêm
                                       </a>
                                       <p id="loadding_m" style="display: none;color: #269AFF;float: left;text-align: center;width: 100%;padding: 20px 0px;">
                                            <img src="<?php echo $baseurl?>public/theme/analytics/images/loading.GIF" /> Đang tải thêm
                                       </p>                                
                                    </div>
                                </div> 
                            </div> 
                        </div>
                           
                        </div>
                    </div>
                </div>
            </div>
      </div>
   </div>
</div>

<script>
var heigh_br = $(".table-br").height();
var heigh_os = $(".table-os").height();
var heigh_device = $(".table-device").height();
$(".show_more_analytics").hide();
if(heigh_br > 300)
{
    $(".table-br").css('height', '400px');$(".show_more_analytics").show();
}
if(heigh_os > 300)
{
    $(".table-os").css('height', '400px');$(".show_more_analytics").show();
}
if(heigh_device > 300)
{
    $(".table-device").css('height', '400px');$(".show_more_analytics").show();
}
$('a[href="#loadmore-br"]').click(function()
{
    
    $(".table-br").css('height', heigh_br+'px').css('max-height', heigh_br+'px');
    $('a[href="#loadmore-br"]').hide();
    return false;
});

$('a[href="#loadmore-os"]').click(function()
{
    
    $(".table-os").css('height', heigh_os+'px').css('max-height', heigh_os+'px');
    $('a[href="#loadmore-os"]').hide();
    return false;
});

$('a[href="#loadmore-device"]').click(function()
{
    
    $(".table-device").css('height', heigh_device+'px').css('max-height', heigh_device+'px');
    $('a[href="#loadmore-device"]').hide();
    return false;
});




function report()
{
    
    var time = $('#times').val();
    $(".preload").css('display','block');
    var link = 'export-report-place';

    var url_report = '<?php echo $baseurl;?>'+link+'?id=<?php echo $id?>&type=1&time='+time+'&time_select='+$('#reportrange span').html();;
    OpenPop(url_report, 650, 990);
}

function report_mobile()
{
    var time = $('#times').val();
    $(".preload").css('display','block');
    var link = 'export-report-mobile';

    var url_report = '<?php echo $baseurl;?>'+link+'?id=<?php echo $id?>&type=1&time='+time+'&time_select='+$('#reportrange span').html();;
    OpenPop(url_report, 650, 990);
}

function report_facebook()
{
    var time = $('#times').val();
    $(".preload").css('display','block');
    var link = 'export-report-facebook';

    var url_report = '<?php echo $baseurl;?>'+link+'?id=<?php echo $id?>&type=1&time='+time+'&time_select='+$('#reportrange span').html();;
    OpenPop(url_report, 650, 990);
}

function report_email()
{
    var time = $('#times').val();
    $(".preload").css('display','block');
    var link = 'export-report-email';

    var url_report = '<?php echo $baseurl;?>'+link+'?id=<?php echo $id?>&type=1&time='+time+'&time_select='+$('#reportrange span').html();;
    OpenPop(url_report, 650, 990);
}


function OpenPop(popUrl, heights, widths) {
			var popUrl = popUrl;
            window.scrollTo(0, 0);
            var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
            var height = document.documentElement.clientHeight + document.documentElement.scrollTop;
            var layer = document.createElement("div");
            layer.style.zIndex = 999;
            layer.id = "layer";
            layer.style.position = "absolute";
            layer.style.top = "0px";
            layer.style.left = "0px";
            layer.style.height = document.documentElement.scrollHeight + "px";
            layer.style.width = width + "px";
            layer.style.backgroundColor = "black";
            layer.style.opacity = "0.75";
            layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=75)");
            document.body.style.position = "static";
            
            
            document.body.appendChild(layer);
            var iframe = document.createElement("iframe");
           
            iframe.name = "Export excel by nhatnv";
            iframe.id = "popup";
            iframe.src = popUrl;
            iframe.style.height = heights + "px";
            iframe.style.width = widths + "px";
            iframe.style.position = "fixed";
            iframe.style.zIndex = 999999;
            iframe.style.backgroundColor = "white";
            iframe.frameborder = "0";
            iframe.style.top = ((height + document.documentElement.scrollTop) / 2) - (heights / 2) + "px";
            iframe.style.left = (width / 2) - (widths / 2) + "px";
            document.body.appendChild(iframe);
        }
function ClosePop() {
    var layer = document.getElementById("layer");
    var iframe = document.getElementById("popup");
    document.body.removeChild(layer); // remove layer
    document.body.removeChild(iframe); // remove div
}
function closeIframe() {
    //window.parent.ClosePop();
    
}
</script>

<style>
.fix-table-hidden-over{
    max-height: 400px;overflow: hidden !important;display: inline-block !important;
}
.fix-thead-hidden-over{
    width: 100% !important;display: inline-table !important;
}
.fix-tbody-hidden-over{
    display: inline-table !important;width: 100% !important
}


</style>
